<template>
	<sy-navigation :homejb="'order'" :showTurnB='true' :scrollTopNum="scrollTopNum" @showTurnHandle="showTurnHandle" :titBgColor="'#3677F6'">
		<template #header>
			<view class="header_title_c">
				 {{calcStatus(orderItem.status)}}
			</view>
		</template>
		<view class="order_view">
			<view class="order_box">
				<view class="time_box">
					<image src="../../static/order/order1.png" class="o1_img"></image>
					<view class="text_info">
						<view class="pe1">
							等待支付，<span v-if="overTime">剩余{{overTime}}</span> 
						</view>
						<view class="pe2">
							超过15分钟未支付，订单将被自动取消
						</view>
					</view>
				</view>
				<view class="order_c1">
					<view class="c_tit">
						<view class="c_tc">
							订单详情
						</view>
					</view>
					<view class="c_info">
						<image src="../../static/order/shop.png" class="o2_img"></image>
						<view class="c_info_msg">
							<view class="c_t">
								志愿评估 1 次
							</view>
							<view class="c_n">
								×1
							</view>
							<view class="c_t">
								￥ {{orderItem.pay_fee}}
							</view>
						</view>
					</view>
				</view>
				<view class="order_c1 no_top">
					
					<view class="hang_bc">
						<view class="c_name">
							支付金额
						</view>
						<view class="c_right">
							￥{{orderItem.remain_pay_fee}}
						</view>
					</view>
					<view class="hang_bc">
						<view class="c_name">
							优惠
						</view>
						<view class="c_right">
							￥0.00
						</view>
					</view>
					<view class="c_bottom">
						合计<span class="red">￥{{orderItem.order_amount}}</span>
					</view>
				</view>
				<view class="order_c1 no_top">
					<view class="hang_bc">
						<view class="c_name">
							订单号码
						</view>
						<view class="c_right">
							{{orderItem.order_sn}}
						</view>
					</view>
					<view class="hang_bc">
						<view class="c_name">
							下单时间
						</view>
						<view class="c_right">
							{{orderItem.createtime}}
						</view>
					</view>
					<!-- <view class="hang_bc">
						<view class="c_name">
							支付方式
						</view>
						<view class="c_right">
							<image src="../../static/order/order3.png" class="o3_img"></image>微信支付
						</view>
					</view> -->
				</view>
				<view class="order_c1 no_top">
					<radio-group @change="radioChange">
						<label class="radio_label">
							<view class="ra_left">
								<image src="../../static/order/wx.png" class="pay_img"></image>微信支付
							</view>
							<view>
								<radio color="#3568DB" :value="'wechat'" :checked="current == 'wechat'" style="transform:scale(0.8)"/>
							</view>
						</label>
						<label class="radio_label">
							<view class="ra_left">
								<image src="../../static/order/wz.png" class="pay_img"></image>评估次数（剩余次数：{{userInfo.estimate_num}}）
							</view>
							<view>
								<radio color="#3568DB" :value="'estimate'" :checked="current == 'estimate'" style="transform:scale(0.8)"/>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="pub_bottom_sub_sy">
			<view class="sub_btn tb" @click="toQuxiao">
				取消订单
			</view>
			<view class="sub_btn tc" @click="toPay">
				立即支付
			</view>
		</view>
	</sy-navigation>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopNum:0,
				current: 'wechat',
				orderItem:{},
				orderId:"",
				overTime:"",
				timer:"",
				canClick:true,
				propPage:""
			};
		},
		onPageScroll(e) {
		    // e.scrollTop 表示当前页面滚动的距离
		    // console.log('页面滚动距离：', e.scrollTop);
			this.scrollTopNum = e.scrollTop;
			
		},
		onLoad(ph) {
			let pages = getCurrentPages(); // 获取当前页面栈
			if (pages.length > 1) {
			    let prevPageRoute = pages[pages.length - 2].route; // 获取上一个页面的路由信息
			    console.log(prevPageRoute); // 输出上一个页面的路由信息
				this.propPage = prevPageRoute
			} else {
			    console.log("没有上一个页面");
			}
			this.orderId = ph.orderId;
			this.getOrderDetail(ph.orderId)
		},
		onShow() {
			
		},
		computed:{
			userInfo(){
				return this.$store.state.userInfo
			},
		},
		onHide() {
			
			let this_ = this;
			if(this.timer){
				clearInterval(this_.timer)
				this.timer = "";
			}
			this.canClick = true;
			this.current = 'wechat';
		},
		methods:{
			daojiTime(orderItem){
				let nowtime = new Date();  //获取当前时间
				let endtimeSj = new Date(orderItem.createtime).getTime() + 900000;
				let endtime = new Date(endtimeSj);
				    
					// console.log(new Date(orderItem.createtime),endtime)
					if(endtime <= nowtime){
						
						let this_ = this;
						clearInterval(this_.timer)
						this.timer = "";
						uni.navigateBack()
					}else{
						var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
						    leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
						    lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
						    leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
						    lefts = Math.floor(lefttime/1000%60);  //计算秒数
							if(leftm<10){ leftm = "0"+leftm }
							if(lefts<10){ lefts = "0"+lefts }
						this.overTime = leftm + ":" + lefts
					}
				
			},
			calcStatus(val){
				if(val == "closed"){
					return "交易关闭"
				}else
				if(val == "cancel"){
					return "已取消"
				}else
				if(val == "unpaid"){
					return "未支付"
				}else
				if(val == "paid"){
					return "已支付"
				}else
				if(val == "completed"){
					return "已完成"
				}
			},
			getOrderDetail(id){
				this.$queryApi("post","/school.order/detail?id="+id, {}, res => {
					console.log(res,"订单详情")
					this.orderItem = res.data;
					if(this.timer == ""){
						this.timer = setInterval(()=>{
							this.daojiTime(this.orderItem)
						},1000)
					}
					
				},"","noMsg")
			},
			radioChange(evt) {
				console.log(evt.detail.value)
				this.current = evt.detail.value
			},
			showTurnHandle(){
				if(this.propPage.indexOf('orderAdmin') > -1){
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:"/pages/mine/mine"
					})
				}
				
			},
			toQuxiao(){
				this.$queryApi("post","/school.order/cancel", {
					id:this.orderId
				}, res => {
					setTimeout(()=>{
						uni.switchTab({
							url:"/pages/index/index"
						})
					},500)
				})
			},
			toPay(){
				console.log(this.current)
				if(this.canClick){
					this.canClick = false
					setTimeout(()=>{
						this.canClick = true;
					},2000)
				}else{
					return false
				}
				this.$queryApi("post","/pay/prepay", {
					order_sn:this.orderItem.order_sn,
					payment:this.current
				}, res => {
					console.log(res,"订单详情")
					if(this.current == 'wechat'){
						uni.requestPayment({
							provider: "wxpay", //支付类型（小程序）
							...res.data.pay_data, // 前面接口返回的数据
							success: (res) => {
							  if (res.errMsg === "requestPayment:ok") {
								console.log("支付成功", res)
								uni.navigateTo({
									url:"/pages/order/orderSuccess?orderId="+this.orderId
								})
							  }
							},
							fail: (err) => {
							  console.log("支付失败", err)
							}
						})
					}else
					if(this.current == 'estimate'){
						uni.navigateTo({
							url:"/pages/order/orderSuccess?orderId="+this.orderId
						})
					}
					
				})
			},
		}
	}
</script>

<style lang="scss">
.header_title_c{
	color: #fff;
	font-size: 36rpx;
	font-weight: 400;
	left: 50%;
	position: absolute;
	top:50%;
	transform: translate(-50%,-50%);
}
.order_view{
	position: relative;
	width: 690rpx;
	left: 30rpx;
	top: -320rpx;
	.order_box{
		// padding: 0 30rpx;
		.time_box{
			display: flex;
			align-items: center;
			padding:0 0 30rpx 40rpx;
			.o1_img{
				width: 88rpx;
				height: 88rpx;
				margin-right: 20rpx;
			}
			.text_info{
				color: #fff;
				.pe1{
					font-size: 40rpx;
					padding-bottom: 8rpx;
				}
				.pe2{
					font-size: 26rpx;
				}
			}
		}
		.hang_bc{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 10rpx 0;
			.c_name{
				color: #999;
			}
			.c_right{
				.o3_img{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
		.radio_label{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			&+.radio_label{
				border-top: 1rpx solid #F6F6F6;
			}
			.ra_left{
				display: inline-flex;
				align-items: center;
				.pay_img{
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}
		}
		.order_c1{
			background-color: #fff;
			border-radius:20rpx ;
			padding: 40rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			&.no_top{
				padding-top: 10rpx;
			}
			.c_info{
				display: flex;
				padding: 20rpx 0;
				.o2_img{
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}
				.c_info_msg{
					flex:1;
					display: inline-flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0;
					.c_t{
						color: #333;
						font-size: 28rpx;
					}
					.c_n{
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			.c_tit{
				display: flex;
				align-items: center;
				
			}
			.c_bottom{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 20rpx 0;
				border-top:2rpx solid #F6F6F6;
				.red{
					color: #F93F38;
					
				}
			}
		}
	}
}
</style>
